<!DOCTYPE html>
<!--[if IE 7]><html class="ie ie7 no-js" lang="en-US"><!
[endif]--><!--[if IE 8]><html class="ie ie8 no-js" lang="en-US"><!
[endif]--><!--[if !(IE 7) | !(IE 8)]><!-->
<html lang="en" class="no-js">
  <head>
    <!-- Basic need -->
    <title>电影可视化推荐系统</title>
    <meta charset="UTF-8" />
    <meta name="description" content="" />
    <meta name="keywords" content="" />
    <meta name="author" content="" />
    <link rel="profile" href="" />
    <!--Google Font-->
    <link rel="stylesheet" href="/assets/css/css.css" />
    <!-- Mobile specific meta -->
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="format-detection" content="telephone-no" />
    <!-- CSS files -->
    <link rel="stylesheet" href="/assets/css/plugins.css" />
    <link rel="stylesheet" href="/assets/css/style.css" />
    <link href="//unpkg.com/layui@2.9.3/dist/css/layui.css" rel="stylesheet">

    <style>
      #mv-img{
        width: 170px;
        height: 260px;
        /*background: url("http://localhost/profile/upload/2024/01/15/Snipaste_2024-01-15_19-07-39_20240115190828A005.png") no-repeat center;*/
        background-size: cover;
      }
      #img-2 {
        width:170px;
        height: 260px;
        object-fit: cover;
        flex: 1;
      }
      .mv-item-infor{
        margin-top: 13px;
      }
    </style>
  </head>
  <body>
    <!--preloading-->
    <div id="preloader">
      <img
        class="logo"
        src="/assets/picture/logo1.png"
        alt=""
        width="119"
        height="58"
      />
      <div id="status"><span></span><span></span></div>
    </div>
    <!--end of preloading--><!--login form popup-->
    <div th:replace="~{movie/common::login-content}"></div>
    <!--end of login form popup--><!--signup form popup-->
    <div th:replace="~{movie/common::signup-content}"></div>
    <!--end of signup form popup--><!-- BEGIN | Header -->
    <div th:replace="~{movie/common::common_header}"></div>

    <!-- END | Header -->
    <div class="hero common-hero">
      <div class="container">
        <div class="row">
          <div class="col-md-12">
            <div class="hero-ct">
              <h1>所有电影</h1>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="page-single">
      <div class="container">
        <div class="row">
          <div class="col-md-8 col-sm-12 col-xs-12">
            <div class="topbar-filter fw">
              <p>一共找到了<span>[[${info.total}]]</span>部电影</p>
<!--              <label>Sort by:</label-->
<!--              ><select>-->
<!--                <option value="popularity">Popularity Descending</option>-->
<!--                <option value="popularity">Popularity Ascending</option>-->
<!--                <option value="rating">Rating Descending</option>-->
<!--                <option value="rating">Rating Ascending</option>-->
<!--                <option value="date">Release date Descending</option>-->
<!--                <option value="date">Release date Ascending</option></select-->
<!--              ><a href="" class="grid"><i class="ion-grid active"></i></a>-->
            </div>
            <div class="flex-wrap-movielist mv-grid-fw">
              <div class="movie-item-style-2 movie-item-style-1" th:each="movie:${info.getList()}">
                <div id="mv-img">
                  <img id="img-2" src="/assets/picture/mv1.jpg" th:src="${movie.getImg()}" alt="" />
                </div>
                <div class="hvr-inner">
                  <a href="moviesingle.html" th:href="@{/movie/{id}(id=${movie.getId()})}"
                    >Read more <i class="ion-android-arrow-dropright"></i
                  ></a>
                </div>
                <div class="mv-item-infor">
                  <h6><a href="#">[[${movie.getName()}]]</a></h6>
                  <p class="rate">
                    <i class="ion-android-star"></i><span>[[${movie.getRate()}]]</span>/10
                  </p>
                </div>
              </div>

            </div>
            <div class="topbar-filter">
<!--              <label>Movies per page:</label-->
<!--              ><select>-->
<!--                <option value="range">20 Movies</option>-->
<!--                <option value="saab">10 Movies</option>-->
<!--              </select>-->
              <div class="pagination2" th:if="${flag} ?: true">
                <span>Page [[${info.pageNum}]] of [[${info.pages}]]:</span>
                <a th:href="@{/movies(page=${info.prePage})}" th:if="${info.hasPreviousPage}"><i class="ion-arrow-left-b"></i></a>
                <a th:each="num:${info.navigatepageNums}" th:href="@{/movies(page=${num})}">
                  [[${num}]]
                </a>
                <a th:href="@{/movies(page=${nextPage})}" th:if="${info.hasNextPage}"><i class="ion-arrow-right-b"></i></a>
              </div>
            </div>
          </div>
          <div class="col-md-4 col-sm-12 col-xs-12">
            <div class="sidebar">
              <div class="searh-form">
                <h4 class="sb-title">搜索电影</h4>
                <form class="form-style-1" action="/moviesearch" method="post">
                  <div class="row">
                    <div class="col-md-12 form-it">
                      <label>电影名称</label><input type="text" name="name" placeholder="电影名">
                    </div>
                    <div class="col-md-12 form-it">
                      <label>分类</label>
                      <div class="group-ip">
                        <div class="ui fluid dropdown selection multiple" tabindex="0">
                          <select name="cate" multiple="" th:with="type=${@dict.getType('movie_type')}">
                          <option value="">所有分类</option>
                          <option value="Action1" th:each="dict : ${type}" th:text="${dict.dictLabel}" th:value="${dict.dictValue}">Action 1</option>
                        </select>
                          <i class="dropdown icon"></i>
                          <div class="default text">选择分类</div>
                          <div class="menu" tabindex="-1" th:with="type=${@dict.getType('movie_type')}">
                            <div class="item" data-value="Action1" th:each="dict : ${type}"  th:text="${dict.dictLabel}" th:data-value="${dict.dictValue}" >Action 1</div>
                          </div>
                          </div>
                      </div>
                    </div>
                    <div class="col-md-12">
                      <input class="submit" type="submit" value="搜索">
                    </div>
                  </div>
                </form>
              </div>
            </div>
          </div>

        </div>
      </div>
    </div>
    <!-- footer section-->
    <!-- end of footer section-->
    <script src="/assets/js/jquery.js"></script>
    <script src="/assets/js/plugins.js"></script>
    <script src="/assets/js/plugins2.js"></script>
    <script src="/assets/js/custom.js"></script>
  <script th:inline="javascript">
    var typeDatas = [[${@dict.getType('movie_type')}]];

  </script>
  </body>
</html>
